<template>
  <div
    class="flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-gray-darkest"
  >
    <div class="sm:mx-auto sm:w-full sm:max-w-[630px]">
      <div class="bg-white py-5 px-10 sm:rounded text-black-70">
        <h3 class="text-xl text-black text-center mb-7">Login</h3>
        <!---->
        <form method="POST">
          <div>
            <div
              role="tablist"
              aria-orientation="horizontal"
              class="flex divide-x font-normal leading-none mb-2.5 divide-[#c4c4c4]"
            >
              <div
                id="headlessui-tabs-tab-3"
                role="tab"
                aria-selected="true"
                tabindex="0"
                aria-controls="headlessui-tabs-panel-5"
                @click="selectType = 'mobile'"
              >
                <label
                  for="mobile"
                  :class="[
                    'block px-2.5 -ml-2.5 cursor-pointer',
                    selectType == 'mobile' ? 'text-yellow' : '',
                  ]"
                  >Find By Mobile</label
                >
              </div>
              <div
                id="headlessui-tabs-tab-4"
                role="tab"
                aria-selected="false"
                tabindex="-1"
                @click="selectType = 'email'"
              >
                <label
                  for="email"
                  :class="[
                    'block px-2.5 -ml-2.5 cursor-pointer',
                    selectType == 'email' ? 'text-yellow' : '',
                  ]"
                  >Find By Email</label
                >
              </div>
            </div>
            <!---->
          </div>
          <Phone v-model="mobileForm" v-if="selectType == 'mobile'" />
          <Email v-model="emailForm" v-else />
          <div class="mt-7 space-y-5">
            <button
              @click.prevent="login"
              class="rounded no-underline border flex items-center justify-center shadow text-black-85 border-transparent hover:bg-yellow-light active:shadow-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary w-full"
            >
              <div>
                <div class="flex items-center justify-center">
                  <span>Login</span
                  ><!---->
                </div>
              </div>
              <!---->
            </button>
          </div>
        </form>
        <div class="mt-7">
          <div>
            <router-link to="sign-up" class="text-[#4575F4] underline"
              >Sign Up</router-link
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Phone from "./components/Phone.vue";
import Email from "./components/Email.vue";
import { mapMutations } from "vuex";
export default {
  components: { Phone, Email },
  data() {
    return {
      mobileForm: {},
      emailForm: {},
      selectType: "mobile",
    };
  },
  methods: {
    ...mapMutations({
      setUserinfo: "user/setUserinfo",
    }),
    login() {
      if (this.selectType == "mobile") {
        this.$api.mobilelogin(this.mobileForm).then((res) => {
          let token = res.data.data.token;
          let userinfo = res.data.data;
          localStorage.setItem("token", token);
          localStorage.setItem("userinfo", JSON.stringify(userinfo));
          this.setUserinfo(userinfo);
          this.$router.push("/");
          this.$notify({
            message: `<div class="flex items-center"><div class="mr-4"><img class="w-[30px]" src="https://www.lucksec.cn/img/tick.0b92e943.svg" alt=""></div><div class="w-[220px]">Login successful, welcome back👏</div><!----></div>`,
            dangerouslyUseHTMLString: true,
          });
        });
      } else {
        const { email, password, code } = this.emailForm;
        this.$api
          .emaillogin({ email, password, code, event: "login" })
          .then((res) => {
            this.$notify({
              message: res?.data?.msg,
            });
            if (res.data.code == 1) {
              let token = res.data.data.token;
              let userinfo = res.data.data;
              localStorage.setItem("token", token);
              localStorage.setItem("userinfo", JSON.stringify(userinfo));
              this.setUserinfo(userinfo);
              this.$router.push("/");
              this.$notify({
                message: `<div class="flex items-center"><div class="mr-4"><img class="w-[30px]" src="https://www.lucksec.cn/img/tick.0b92e943.svg" alt=""></div><div class="w-[220px]">Login successful, welcome back👏</div><!----></div>`,
                dangerouslyUseHTMLString: true,
              });
            }
          });
      }
    },
  },
};
</script>
<style lang="" scoped></style>
